<template>
    <div class="emb-guide-preview">
        <p class="text-name">{{ (currentPiece || {}).mappingName }}</p>
        <!-- 背景 -->
        <div class="editor-render-mask" :name="(currentPiece || {}).canvas_name">
            <canvas ref="mask"></canvas>
            <div v-if="isLoading" class="loading-indicator">
                <img style="width:32px" src="@/assets/images/loading.gif" />
            </div>
            <!-- 边框 -->
            <div v-else class="editor-gridline-border" :style="renderStyle">
                <svg viewBox="0 0 86 86">
                    <rect x="40" y="19" width="6" height="48" rx="3"></rect>
                    <rect x="19" y="40" width="48" height="6" rx="3"></rect>
                </svg>
            </div>
        </div>
        <!-- {{ `${currentPiece ? currentPiece.surface_name : ''}-${classify}` }} -->
        <p>{{ `Embroidery frames can be placed anywhere within the blue area, and you can add up to ${frameCount > 1 ? frameCount + ' frames.': frameCount + ' frame.'} ` }}</p>
    </div>
</template>
<script>
import DesignResource from "@/utils/DesignResource.js";
// "Front Side": "Front",
// "Back Side": "Back",
// "Sleeve Left": "Left Sleeve",
// "Sleeve Right": "Right Sleeve",
// "Long Sleeve Left": "Sleeve Left",
// "Long Sleeve Right": "Sleeve Right",
// "Neck Label Inner": "Inside Neck Label",
// "t-shirts"; // t 恤
// "long-sleeve"; // 长袖
// "hoodies"; // 帽衫
// "sweat-shirts"; // 运动衫
// "tank-tops"; // 背心
// "shorts"; // 裤子
// "pants"; // 短裤
// "clothes";
const illustrateMapping = {
    'Front Side-t-shirts': '3',
    'Back Side-t-shirts': '3',
    'Front Side-long-sleeve': '3',
    'Back Side-long-sleeve': '3',
    'Front Side-hoodies': '3',
    'Back Side-hoodies': '3',
    'Front Side-sweat-shirts': '3',
    'Back Side-sweat-shirts': '3',
    'Front Side-tank-tops': '3',
    'Back Side-tank-tops': '3',
    'Front Side-shorts': '2',
    'Back Side-shorts': '2',
    'Front Side-pants': '2',
    'Back Side-pants': '2',
    'Sleeve Left-t-shirts': '1',
    'Sleeve Right-t-shirts': '1',
    'Long Sleeve Left-long-sleeve': '2',
    'Long Sleeve Right-long-sleeve': '2',
}
export default {
    name: "DetailEmbGuidePreview",
    props: ['activePiece', 'classify'],
    data () {
        return {
            isLoading: false,
            data: {},
            illustrateMapping: illustrateMapping
        }
    },
    computed: {
        frameCount(){
            return this.illustrateMapping[`${this.currentPiece ? this.currentPiece.surface_name : ''}-${this.classify}`]
        },
        currentPiece () {
            return this.activePiece || null
        },
        // 渲染器
        renderStyle () {
            if (!this.currentPiece) {
                return { display: 'none' }
            } else {
                let piece = this.currentPiece;
                return {
                    width: 100 * piece.canvas_width / piece.outer_width + '%',
                    height: 100 * piece.canvas_height / piece.outer_height + '%',
                    left: 100 * piece.canvas_left / piece.outer_width + '%',
                    top: 100 * piece.canvas_top / piece.outer_height + '%',
                    transform: `rotate(${piece.canvas_rotate}deg)`,
                    backgroundColor: '#EFF6F9'
                }
            }
        },
    },
    watch: {
        activePiece: {
            immediate: true,
            handler (val) {
                if (val) {
                    this.updateMask(val);
                }
            }
        },
    },
    methods: {
        // 修改背景图
        updateMask (piece) {
            const canvas = this.$refs.mask || document.querySelector('.editor-render-mask canvas');

            const url = piece.mask_image || '';
            const option = {
                type: "simple",
                form: "editor",
            };

            const cache = JSON.stringify({ url: url });
            if (canvas) {
                this.isLoading = true
                // 清空画布
                const ctx = canvas.getContext("2d")
                canvas.width = 640;
                canvas.height = 640;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 写画布
                url && DesignResource.loadImage(url, option).then(image => {
                    // const rect = canvas.parentNode.getBoundingClientRect();
                    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
                    canvas.cache = cache;
                }).catch(() => {
                    this.isLoading = false;
                }).finally(() => {
                    this.isLoading = false;
                });

            }
        }

    },
    mounted () { },
}
</script>
<style scoped lang="scss">
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.emb-guide-preview {
    width: 400px;
    height: 550px;
    border: 1px solid #e6e6e6;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > p {
        width: 320px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        font-size: 12px;
        color: #000000;
        line-height: 20px;
        margin-top: 32px;
        &.text-name {
            text-align: center;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 12px;
            color: #000000;
            line-height: 14px;
            margin: 0 0 32px;
        }
    }
}
.editor-gridline-border {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px dashed #239ac2;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
    svg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
        width: 60px;
        height: 60px;
        fill: #5dd3fb;
        transition: all 0.1s;
    }
}
.editor-render-mask {
    width: 320px;
    height: 320px;
    position: relative;
    canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
</style>
